<%@page import="com.dd.shop4j.goods.enums.GoodStatus"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<title>添加商品</title>
<%@ include file="../../../common/admin_taglib.jsp" %>
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery-easyui-1.3.3/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/resources/js/jquery-easyui-1.3.3/themes/icon.css">
<script type="text/javascript" src="${ctx}/resources/js/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${ctx}/resources/js/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$(function(){
	//添加相册
	$("#add_image_btn").click(function(){
		$("#goods_images").append('<div class="image_line"><input type="hidden" name="imageIds" value="0"/> <input type="file" name="images" class="input-large"/> <a onclick="$(this).parent().remove();" class="btn btn-small btn-danger">删除</a></div>');
	});
	
	//加载商品分类树
	$("#parentIdTree").combotree({
		url : "${ctx}/admin/categ/gridTree"
	});
	
	//鼠标移过显示图片
	$('#showImage').popover({
		trigger : "hover",
		title : "显示商品图片",
		content : "<img width='100%' height='100%' src='${ctx}/${good.srcImg}' onerror='javascript:this.src=\"${ctx}/resources/images/noimage.jpg\";'/>"
	});
	
	//初始化明细属性
	var detailHtml = $("#detailTemplate").html();
	$("#good_attr_details").html(detailHtml);
	
	//商品属性改变事件
	$("#attrId").change(function(){
		if (this.value == "") {return;}
		if (this.value == "${good.attrId}") {
			$("#good_attr_details").html(detailHtml);
			return;
		}
		$.get("${ctx}/admin/goods/attrDetails/" + this.value, function(datas){
			var items = "";
			for (var i in datas) {
				items += "<tr>";
				items += "<td>" + datas[i].name + "</td>";
				items += "<td><input type='hidden' name='attrDetailIds' value='"+datas[i].id+"'/>";
				if (datas[i].type == "1" && datas[i].attrValue != null) {
					var attrValue = datas[i].attrValue.split(",");
					items += "<select name='attrValues'>";
					for (var j in attrValue) {
						items += "<option>" + attrValue[j] + "</option>";
					}
					items += "</select>";
				} else {
					items += "<input name='attrValues' type='text' class='input-small validate' validate='empty' />";
				}
				items += "&nbsp;&nbsp;<a href='javascript:void(0);' onclick='addItem(this);'>[ + ]</a>";
				items += "</td>";
				items += "</tr>";
			}
			$("#good_attr_details").html(items);
		});
	});
});
//添加一条商品属性
function addItem(t) {
	var a = $(t).parents("td").clone();
	a.find("a").remove();
	a.find(".x").attr("value", "0");
	a.find(".z").attr("value", "");
	var clazz = $(t).parents("tr").attr("class");
	var lastNode = $("#good_attr_details > ." + clazz).last();
	lastNode.after("<tr class='"+clazz+"'><td></td><td>"+a.html().replace("selected=\"selected\"", "")+"<a href='javascript:void(0);' onclick='removeItem(this);'>[ - ]</a></td></tr>");
}
//删除一条商品属性
function removeItem(t) {
	$(t).parents("tr").remove();
}
//相册编辑标题
function editTitle(t, id) {
	var title = $(t).find("h4").html();
	$(t).html("<h4>图片标题</h4><input type='text' value='"+title+"' class='input-xlarge'  onblur='saveTitle(this, "+id+");'/>");
}
//保存相册标题
function saveTitle(t, id) {
	$.post("${ctx}/admin/goods/updateImageTitle", {
		"id" : id,
		"title" : $(t).val()
	}, function(){
		$(t).parents(".carousel-caption").html("<h4>" + $(t).val() + "</h4>");
	});
}
//删除图片
function deleteImage(id) {
	$.messager.confirm("温馨提醒", "您确认要删除该图片吗？删除后图片将无法恢复。", function(b){
		if (b) {
			$.get("${ctx}/admin/goods/deleteImage/" + id, function(){
				$(this).parent().remove();
			});
		}
	});
}
</script>
<style type="text/css">
.image_line {margin-bottom:10px;}
.image_line2 {margin-bottom:10px;}
</style>
</head>
<body>

<h1 class="page-title">Shop4j 管理中心</h1>
<ul class="breadcrumb">
	 <li><a href="${ctx}/admin/main">管理中心</a><span class="divider">/</span></li>
	 <li><a href="${ctx}/admin/goods/list">商品列表</a><span class="divider">/</span></li>
     <li class="active">编辑商品</li>
</ul>


<div class="row-fluid">
	<div class="btn-toolbar">
    	<button class="btn btn-primary" onclick="$('#editForm').submit();"><i class="icon-ok"></i> 保存</button>
    	<input class="btn" value="重置" type="reset"/>
  		<div class="btn-group"></div>
	</div>

	<div class="well">
		<ul class="nav nav-tabs">
	      <li class="active"><a href="#goods_info" data-toggle="tab">商品信息</a></li>
	      <li><a href="#goods_description" data-toggle="tab">商品描述</a></li>
	      <li><a href="#goods_images" data-toggle="tab">商品图片</a></li>
	      <li><a href="#goods_attr" data-toggle="tab">商品属性</a></li>
	    </ul>
	    <form method="post" id="editForm" action="${ctx}/admin/goods/update" enctype="multipart/form-data">
		<dd:token></dd:token>
		<input type="hidden" name="good.id" value="${good.id}"/>
	    <div id="myTabContent" class="tab-content">
	    	<div id="goods_info" class="tab-pane active in">
	    		<label>商品名称</label>
        		<input type="text" name="good.name" value="${good.name}" class="input-xxlarge">
        		<label>货号</label>
        		<input type="text" name="good.code" value="${good.code}" class="input-xxlarge">
        		<label>商品名样式</label>
        		<input type="text" name="good.nameStyle" value="${good.nameStyle}" class="input-xxlarge">
        		<label>品牌</label>
        		<select name="good.brandId" class="span2">
        			<option selected="selected" value="">-请选择-</option>
        			<c:forEach items="${brands}" var="b">
        				<option<c:if test="${good.brandId == b.id}"> selected</c:if> value="${b.id}">${b.name}</option>
        			</c:forEach>
        		</select>
        		<label>分类</label>
        		<input type="text" name="good.categId" value="${good.categId}" id="parentIdTree" class="input-middle" style="height:30px;" />
        		<label style="margin-top: 10px;">商品原价</label>
        		<input type="text" name="good.srcPrice" value="${good.srcPrice}" class="input-xxlarge">
        		<label>商品售价</label>
        		<input type="text" name="good.shopPrice" value="${good.shopPrice}" class="input-xxlarge">
        		<label>促销价</label>
        		<input type="text" name="good.promotePrice" value="${good.promotePrice}" class="input-xxlarge">
        		<label>促销开始时间</label>
        		<input type="text" name="good.promoteStart" value="<fmt:formatDate value="${good.promoteStart}" pattern="yyyy-MM-dd HH:mm"/>" id="promoteStart" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',maxDate:$('#promoteEnd').val()})" class="input-large">
        		<label>促销结束时间</label>
        		<input type="text" name="good.promoteEnd" value="<fmt:formatDate value="${good.promoteEnd}" pattern="yyyy-MM-dd HH:mm"/>" id="promoteEnd" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',minDate:$('#promoteStart').val()})" class="input-large">
        		<label>积分</label>
        		<input type="text" name="good.saleScore" value="${good.saleScore}" class="input-xxlarge">
        		<label>积分价</label>
        		<input type="text" name="good.scorePrice" value="${good.scorePrice}" class="input-xxlarge">
        		
        		<label>图片上传</label>
        		<input type="file" name="image" class="input-large">
        		<a id="showImage" class="btn btn-small btn-info" href="${ctx}/${good.srcImg}" target="_blank">查看图片</a>
        		
        		<label>库存</label>
        		<input type="text" name="good.goodNum" value="${good.goodNum}" class="input-xxlarge">
        		<label>库存预警</label>
        		<input type="text" name="good.warnNum" value="${good.warnNum}" class="input-xxlarge">
        		<label>新精热状态</label>
        		<div class="well">
        			<label class="checkbox_label">
        				<input name="good.newFlag" type="checkbox" ${good.newFlag ? "checked='checked'" : ""}/>
        				新品
        			</label>
        			<label class="checkbox_label">
        				<input name="good.bestFlag" type="checkbox" ${good.bestFlag ? "checked='checked'" : ""}/>
        				精品
        			</label>
        			<label class="checkbox_label">
        				<input name="good.hotFlag" type="checkbox" ${good.hotFlag ? "checked='checked'" : ""}/>
        				热销
        			</label>
        		</div>
        		<label>商品状态</label>
        		<select id="goodStatus" name="good.status" class="span2">
        			<%
        			GoodStatus[] ss = GoodStatus.values();
        			for (GoodStatus s : ss) {
        				if (s != GoodStatus.DELETE)
        					out.write("<option value='"+s.getCode()+"'>"+s.getText()+"</option>");
        			}
        			%>
        		</select>
        		<script type="text/javascript">$(function(){$("#goodStatus").val("${good.status}");});</script>
        		<label>上架时间</label>
        		<input type="text" name="good.upTime" value="<fmt:formatDate value="${good.upTime}" pattern="yyyy-MM-dd HH:mm"/>" id="upTime" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',maxDate:$('#downTime').val()})" class="input-large">
        		<label>下架时间</label>
        		<input type="text" name="good.downTime" value="<fmt:formatDate value="${good.downTime}" pattern="yyyy-MM-dd HH:mm"/>" id="downTime" onfocus="WdatePicker({doubleCalendar:true,dateFmt:'yyyy-MM-dd HH:mm',minDate:$('#upTime').val()})" class="input-large">
        		<label>SEO关键字</label>
        		<input type="text" name="good.seoKeyword" value="${good.seoKeyword}" class="input-xxlarge">
        		<label>SEO描述</label>
        		<textarea rows="3" name="good.seoDescription" class="input-xxlarge">${good.seoDescription}</textarea>
	    	</div>
	    	<div id="goods_description" class="tab-pane">
	    		<input type="hidden" name="description.id" value="${description.id}"/>
	    		<label>商品描述</label>
	    		<textarea rows="3" name="description.description" class="input-xxlarge">${description.description}</textarea>
	    		<label>商品详情</label>
	    		<textarea rows="20" name="description.descriptionDetail" class="input-xxlarge">${description.descriptionDetail}</textarea>
	    	</div>
	    	<div id="goods_images" class="tab-pane">
	    		<a id="add_image_btn" class="btn btn-small btn-info" style="margin-bottom:10px;">添加相片</a>
	    		
	    		<div id="myCarousel" class="carousel" style="width:450px;">
				  <div class="carousel-inner">
				  	<div class="item active">
				  		<dd:image url="${good.srcImg}"></dd:image>
				  		<div class="carousel-caption">
		                  <h4>${good.name}</h4>
		                </div>
				  	</div>
				  	<c:forEach items="${images}" var="img">
				    <div class="item">
				    	<dd:image url="${img.srcImg}"></dd:image>
				    	<div class="carousel-caption" style="cursor: pointer;" ondblclick="editTitle(this, ${img.id});">
		                  <h4>${img.title}</h4>
		                </div>
				    </div>
				    </c:forEach>
				  </div>
				  <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
				  <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
				</div>
	    		<hr />
	    		<c:forEach items="${images}" var="img">
		    		<div class="image_line">
		    			<input type="hidden" name="imageIds" value="${img.id}"/>
		    			<input type="file" name="images" class="input-large"/>
		    			<a onclick="deleteImage(${img.id});" class="btn btn-small btn-danger">删除</a>
		    			<a id="img_${img.id}" class="btn btn-small btn-info" href="${ctx}/${img.srcImg}" target="_blank">查看图片</a>
		    		</div>
		    		<script type="text/javascript">
		    			$("#img_${img.id}").popover({
		    				trigger : "hover",
		    				title : "显示商品图片",
		    				content : "<img width='100%' height='100%' src='${ctx}/${img.srcImg}' onerror='javascript:this.src=\"${ctx}/resources/images/noimage.jpg\";'/>"
		    			});
		    		</script>
	    		</c:forEach>
	    	</div>
	    	<div id="goods_attr" class="tab-pane">
        		<table style="width:100%;" class="form-horizontal">
        			<thead>
        				<tr>
        					<td width="20%">商品分类</td>
        					<td>
        						<select id="attrId" name="good.attrId">
        							<option selected="selected" value="">-请选择-</option>
        							<c:forEach items="${attrs}" var="a">
        								<option value="${a.id}" ${good.attrId == a.id ? 'selected="selected"' : ''}>${a.name }</option>
        							</c:forEach>
        						</select>
        					</td>
        				</tr>
        				<tr>
        					<td colspan="2">
        						<hr />
        					</td>
        				</tr>
        			</thead>
        			<tbody id="good_attr_details"></tbody>
        		</table>
	    	</div>
	    </div>
	    </form>
	</div>
</div>

<table style="display:none;">
	<tbody id="detailTemplate">
	<c:forEach items="${attrDetails}" var="ad">
		<c:set var="i" value="0"></c:set>
		<c:forEach items="${goodAttrDetails}" var="gd">
			<c:if test="${gd.attrDetailId == ad.id}">
				<tr class="item_${ad.id}">
					<td>${i == 0 ? ad.name : ""}</td>
					<td>
						<input type="hidden" name="attrDetailIds" value="${ad.id}"/>
						<input type="hidden" name="goodAttrDetailIds" class="x" value="${gd.id}"/>
						<c:choose>
							<c:when test="${ad.type == '1'}">
								<select name="attrValues" class="y">
									<c:forEach items="${fn:split(ad.attrValue, ',')}" var="av">
										<option value="${av}" ${av == gd.attrValue ? 'selected="selected"' : ''}>${av}</option>
									</c:forEach>
								</select>
							</c:when>
							<c:otherwise>
								<input type="text" class="z" name="attrValues" value="${gd.attrValue}" class='input-small validate' validate='empty' />
							</c:otherwise>
						</c:choose>
						&nbsp;&nbsp;
						<c:if test="${i == 0}">
							<a href="javascript:void(0);" onclick="addItem(this);">[ + ]</a>
						</c:if>
						<c:if test="${i == 1}">
							<a href="javascript:void(0);" onclick="removeItem(this);">[ - ]</a>
						</c:if>
					</td>
				</tr>
				<c:set var="i" value="1"></c:set>
			</c:if>
		</c:forEach>
	</c:forEach>
	</tbody>
</table>

</body>
</html>
